<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@taglib uri="http://chances.com.cn/jsp/epgdata" prefix="epgdata"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
<%@taglib uri="http://chances.com.cn/jsp/epgutils" prefix="epgutils"%>
<!DOCTYPE html>
<html>
<head>
	<title>SMART_TV</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">	
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	
	<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
	<%@include file="/sites/weixin/js/common.jsp" %>
	<%@include file="/sites/weixin/common/common_js.jsp" %>
	<link rel="stylesheet" type="text/css" href="${_contextPath}/sites/weixin/css/mobile_z.css" />
	<link rel="stylesheet" type="text/css" href="${_contextPath}/sites/weixin/css/wx.css" />
	<script type="text/javascript" src="${_contextPath}/sites/weixin/js/iscroll.js"></script>
</head>
<body onload="init()">
<div id="app">
<!-- 头部 -->
<div class="row menu-row navbar-fixed-top">
	<div class="col-xs-2 menu-col"  onclick="onBackEvent();">
		<img src="${_templatePath}/images/back.png" class="menu-col-back"/>
	</div>
	<div class="col-xs-8 menu-col">
		<span>我的相册</span>
	</div>
	
	<div v-if="content.length > 0" class="col-xs-2" style="height: 30px; margin-top: 11px;  text-align: center;     padding: 0px;font-size: 14px;">
		<span id="deleteIcon" onclick="deleteShow()" class="glyphicon glyphicon-trash" ></span>
		<span id="cancelIcon" onclick="deleteCancel()" style="display: none" >取消</span>
	</div>
</div>

<!-- 相册 -->
<div v-if="content.length == 0" class="container-fluid" style="margin-top:80px;">
	<div class="col-xsd-12" id="empty_image" style="display:none;">
		<img style="max-width:100%" src="${_templatePath}/images/photo_empty.png"/>
	</div>
</div>

<!-- 相册内容 -->

	<div class="layout" id="classify_video">
		<div class="list wrapper-list" id="wrapper"
			style="overflow: hidden; margin-top: 3.5em; padding-top: 0em;">
			<div class="program program-list">
				<div id="pullDown" class="" style="display: none;width:100%;margin:0;padding:0px;">
					<span class="pullDownIcon"></span><span class="pullDownLabel"></span>
				</div>
				<div  id="filter_result" class="row row-empty"  
					style="margin:0px;margin-top:0.4em;margin-left:0.2em;margin-right:0.2em;">
					<template v-for="(item,index) in content">
						<div class="col-xs-3" :id="'checked_'+item.pIdx+'_'+index+'_row'" style="margin-bottom:0.4em;padding-left:0.2em;padding-right:0.2em;">
							<input type="hidden" :id="'checked_'+item.pIdx+'_'+index+'_val'" :value="item.id"/>
							<div class="photo" style="position:relative; height:100%;">
								<div>
									<img class="lazyImg"  style="max-width:100%;"
											:src="contextPath+'/sites/weixin/images/defaultBg_3.jpg'" :data-original="item.icon" />
								</div>
								<div class="unchecked" :id="'unchecked_'+item.pIdx+'_'+index" @click="check('checked_'+item.pIdx+'_'+index)"
									style="display:none;background-color:rgba(221,221,221,0.5); position: absolute;left:0px;top:0px;width:100%;height:100%;">
									<div style="float: right;">
										<img :id="'check_'+index" :src="templatePath+'/images/dl_empty.png'" style="max-width: 20px;"/>
									</div>
								</div>
								<div class="checked"  :id="'checked_'+item.pIdx+'_'+index" @click="uncheck('checked_'+item.pIdx+'_'+index)" 
									style="display:none;background-color:rgba(221,221,221,0); position: absolute;left:0px;top:0px;width:100%;height:100%;">	
									<div  style="float: right;" >
										<img :id="'check_'+index" :src="templatePath+'/images/dl.png'" style="max-width: 20px;"/>
									</div>
								</div>
							</div>
						</div>
					</template>
				</div>
				
				<div id="pullUp" class="" style="display: none;">
					<span class="pullUpIcon"></span><span class="pullUpLabel">往上拉加载更多...</span>
				</div>
				
			</div>
		</div>
	</div>

</div>

	<!-- 上传照片 -->
	<div class="navbar-fixed-bottom row upload" style="margin: 3px;margin-bottom:0.5em;color:white;text-align:-webkit-center;z-index:9999">
		<div class="col-xs-12">
			<div onclick="up_onepic();" style="font-size:1.1em;background-color:#00a7ba;height:2.5em;width:50%;line-height:2.5em;border-radius: 4px;">
				上传照片
			</div>
		</div>
	</div>
	
	<epgutils:currUrl var="url"/>
	<epgutils:wechatConfig  debug="true" apiString="chooseImage" var="tokenConfig" url="${url}"/>
	<epgutils:wechatUrl var="uploadUrl" action="upload" from="null" path="/wechat/photo/upload.wx"/>
	<epgutils:wechatUrl var="photoListUrl" action="photoList" from="null" path="/wechat/photo/list.wx"/>
	<epgutils:wechatUrl var="photoDelsUrl" action="photoDels" from="null" path="/wechat/photo/dels.wx"/>
	
	<script>
	//上传照片
	function up_onepic() {
		wx.chooseImage({
		    count: 3, // 默认9
		    sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
		    sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
		    success: function (res) {
		        var localIds = res.localIds;
		        syncUpload(localIds);
		      }
		}); 
		    	
	}	    	
	
	var syncUpload = function(localIds){
	  var localId = localIds.pop();
	  wx.uploadImage({
	    localId: localId,
	    isShowProgressTips: 1,
	    success: function (res) {
	      var serverId = res.serverId; // 返回图片的服务器端ID
	        $.getJSON("${uploadUrl}",
	        	{
	        		mediaId:serverId,
	        		userId:"${EPG_USER_SESSION.userId}",
	        		nickName:encodeURIComponent("${EPG_USER_SESSION.wechatUser.nickname}")
	        	},
	        	function(json){
	        	}
	        );
	      //其他对serverId做处理的代码
	      if(localIds.length > 0){
	        syncUpload(localIds);
	      }else{
	    	  setTimeout(refresh,1000);
	    	  //window.location.reload();
	      }
	    }
	  });
	};
	function refresh(){
		 window.location.href = window.location.href;
	}
		    	
    function init() {
    	wx.config({
    		debug:false,
    	 	appId:'${appId}',
    	 	timestamp:'${tokenConfig.timestamp}',
    	 	nonceStr:'${tokenConfig.noncestr}',
    	 	signature:'${tokenConfig.signature}',
    	 	jsApiList:['chooseImage','uploadImage']
    	});
    	
    	//initContent();
    }
    
    var ts = new TouchScoller(IScollerConfig, getData);
    function initContent() {
    	ts.init();
    	ts.load();
    	ts.newRefresh();
    }
    var params = {pageSize:16,
    		pageIndex:1,
    		userId:'${EPG_USER_SESSION.userId}'
    	};
    function getData(pageIndex){
    	params.pageIndex = pageIndex;
		$.ajax({
    		method:"get",
    		data:params,
    		url:"${photoListUrl}",
    		async:false,
    		success:function(data){
    			var result = data;
    			/* console.log("photolist:");
    			console.log(data); */
    			var add = result.resultSet;
    			if(add && add.length>0){
    				//为新增数据增加页数属性pIdx
    				for(var i=0;i<add.length;i++){
    					add[i].pIdx = pageIndex;
    				}
    				//增加内容
    				vm.content = vm.content.concat(add);
    				
    				//保证可以一直滑
    				ts.pageCount = ts.currentPage + 1;
    				//刷新滚动条
    				setTimeout(function(){ts.refershDiv();},500);
    				//提示是否还有更多
    				if(params.pageSize == add.length){
    					ts.showUpMore();
    				}else{
    					//显示没有更多内容
    					ts.pageCount = ts.currentPage;
    					ts.hideNoMore();
    				}
    			}else{
    				//当前是第一页，表示没有内容
					if(ts.currentPage == 1){
						//显示结果为空
						ts.newRefresh(0);
						showEmptyImage();
					}else{
						//显示没有更多内容
						ts.pageCount = ts.currentPage;
						ts.hideNoMore();
					}
    			}
    		},
    		error:function(){
    			showEmptyImage();
    		}
    	});
    }
    
    
    
    /* var filter = {templatePath:"${templatePath}",contextPath:"${contextPath}",pageIndex:"1",userId:"${EPG_USER_SESSION.userId}"};
    function ajaxUrlGetData(pageIndex) {
    	filter.pageIndex = pageIndex;
    	$.ajax({
   			type : "get",
   			url : "${photoListUrl}",
   			async : false,
   			data : filter,
   			success : function(data) {
   				alert(data.resultSet.length)
   				//alert(data.message)
   				$("#filter_result").append(data);
   				ts.pageCount = pageBean.totalCount;
   				if($(".checkButton").css("display")== "block"){
   					deleteShow();
   		    	} 
   				
   			},
   			error : function() {
   			}
   		});
    } */
	</script>
	
	<!-- 删除按钮 -->
	<div class="navbar-fixed-bottom row checkButton" style="margin: 3px;margin-bottom:0.5em;color:white;text-align:-webkit-center;display:none">
		<%--<div class="col-xs-6" style="padding: 8px;" onclick="checkAll()">
			<div  style="background-color:#00a7ba;height:30px;padding-top:5px;border-radius: 4px;">
				<span id="check_all">全选</span>
			</div>
		</div>--%>
		<div class="col-xs-12">
			<div onclick="doDelete()" style="font-size:1.1em;background-color:#d44240;height:2.5em;width:50%;line-height:2.5em;border-radius: 4px;">
				<span id="deleteCount">删除</span>
			</div>
		</div>
	</div>
	
	<!-- 提示选中超出数量 -->
	<div id="alertDiv" style="display:none;text-align:center;line-height:5em; position:absolute;left:15%;top:40%; width: 70%;height:5em;background-color: black;color:white;border-radius:0.5em;font-size:1.5em;z-index:99999;opacity:0.6;">最多选择6张！</div>
<script>
function deleteShow(){
	$("#deleteIcon").hide();
	$("#cancelIcon").show();
	$(".unchecked").each(function(index,ele){
		var id = ele.id;
		id = id.substring(2);
		if($("#"+id).css("display") != "block"){
			$(ele).css("display","block");
		}
	});
	$(".upload").hide();
	$(".checkButton").show();
}
function check(id){
	if(getCheckedAmount()>=6){
		showAlert("最多只能选6张！",1000);
		return 0;
	};
	switchStatus(id);
	refleshAllCodes();
}
function uncheck(id){
	switchStatus(id);
	refleshAllCodes();
}
function switchStatus(id){
	$("#"+id).toggle();
	$("#un"+id).toggle();
}
var selectCodes = new Array();
var selectIds = new Array();
function refleshAllCodes(){
	selectCodes = new Array();
	selectIds = new Array();
	$(".checked").each(function(index,ele){
		if($(ele).css("display")== "block"){
			selectCodes.push($("#"+ele.id+"_val").val());	
			selectIds.push(ele.id);
		}
	});
	if(selectCodes.length > 0){
		$("#deleteCount").html("删除("+selectCodes.length+")");
	}else{
		$("#deleteCount").html("删除");
	}
}
function getCheckedAmount(){
	var amount = 0;
	$(".checked").each(function(index,ele){
		if($(ele).css("display")== "block"){
			amount = amount + 1;
		}
	});
	return amount;
}

function checkAll(){
	var check = document.getElementById("check_all"); 
	var text = check.innerText;
	if(text == "全选"){
		$(".unchecked").hide();
		$(".checked").show();
		check.innerText = "取消全选";
	}else{
		$(".unchecked").show();
		$(".checked").hide();
		check.innerText = "全选";
	}
	refleshAllCodes();
}
function doDelete(){
	if(selectCodes.length > 0){
		showLoading('正在删除');
		var result  = selectCodes.join(",");//JSON.stringify(selectCodes);
		photoCtrl.dels('${photoDelsUrl}',result,function(){
			//refleshLocalHistory(selectCodes);
			for(var i=0;i<selectCodes.length;i++){
				$("#"+selectIds[i]+"_row").remove();
			}
			var left = $(".photo");
			if(left.length == 0){
				window.location.href = window.location.href;
			}
			$("#loadingToast").hide();
			showToast('删除成功',1000);
			deleteCancel();
			fullContent();
		});
	}
}
function fullContent(){
	refresh();
}
function deleteCancel(){
	$(".unchecked").hide();
	$(".checked").hide();
	$("#cancelIcon").hide();
	$("#deleteIcon").show();
	$(".checkButton").hide();
	$(".upload").show();
	refleshAllCodes();
}
function cancelUpload(){
	$(".upload").show();
}

//vue
var vm = new Vue({
	el:"#app",
	data:{
		content:[],	
		templatePath:"${_templatePath}",
		resourcePath:"${_resourcePath}",
		contextPath:"${_contextPath}",
	},
	mounted:function() {
		this.$nextTick(function () {
			initContent();
	 	});
	},
	methods:{
		check:check,
		uncheck:uncheck
	}
});
function showEmptyImage(){
	document.getElementById("empty_image").style.display = "block";
}

</script>	
<%@include file="/sites/weixin/common/bodyEndVm.jsp" %>
</body>
</html>
